<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <title>临停车辆</title>

    <link rel="stylesheet" href="../css/weui.css"/>
    <link rel="stylesheet" href="../css/example.css"/>
    <link rel="stylesheet" href="../css/plate.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <style>
    html,body{
            font-family: 'PingFangSC-Regular';
            width: 100%;
            height: 99%;
            background : #F5F5F9;
            color: rgba(51, 51, 51, 0.87);
            margin : 0;
            overflow-y: auto;
    }

    .weui-panel{
        top: 15px;
        border-radius: 6px;
        margin: 0px 15px 0px 15px;
    }

    .weui-panel__hd:after{
        border-bottom: none;
    }

    .weui-media-box{
        padding: 0px;
    }
    .hheader{
        display: flex;
        align-items: center;
        justify-items: center;
        padding: 10px 10px 10px 10px;
        
    }

    .order{
        width: 16px;
        height: 18px;
    }

    .weui-media-box_appmsg .weui-media-box__thumb{
        width: auto;
    }
    .title{
        color: #333333;
        margin-left: 8px;
    }

    .logo_car{
        width: 42px;
        height: 34px;
        
    }
    .middle{
        border: none;
        margin-bottom: 10px;

    }

    .type_card{
        display: block;
        color: white;
        font-size: 10px;
        background-color: #ffba1e;
        padding: 3px 8px 3px 8px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .weui-media-box_appmsg{
        align-items: flex-start;
        margin-top: 10px;
    }

  

    .weui-media-box__hd{
        margin-left: 30px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
    .weui-media-box__title{
        font-weight: 600;
        font-size: 16px;
    }

    .weui-media-box__desc{
        margin-top:4px;
    }

    .park_money{
        margin-top: 10px;
        color: #333333;
    }
    .park_money>span{
        color: #0051BB;
        font-weight: 600;
        font-size: 20px;
    }

    .park_time>span{
        color: #0051BB;
        font-weight: 400;
    }

    .block>img{
        width: 44px;
        height: 44px;
    }

    .weui-panel__ft{
        border-top: 1px solid #E5E5E5;
        margin: 0px 10px;
        padding: 10px 0px;
    }

    .kind_card{
        display: flex;
        justify-content: space-between;
        padding: 0px 20px;
    }

    .block{
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    
    .block>span{
        font-size: 12px;
        margin: 6px;
    }

    .down{
        margin-top: 10px;
        background-color: #F5F5F9;
    }
    .ad{
        width: 100%;
    }
    .tip{
        color: #333333;
        margin-top: 10px;
        font-size: 12px;
    }
    .desc{
        color: #8b8b8b;
        margin-top: 4px;
        font-size: 10px;
    }
     /* 点击的css */
     .locked {
        color: #BF0000;
    }
    .unlocked {
        color: #0051BB;
    }
    .locked-other {
        color: #EAEAEA;
    }
    .locked-all {
        color: #818181;
    }
    .lock-info,.unlock-info {
        height: 80px;
        text-align: center;
        display: none;
        flex-direction: column;
        justify-content: center;
    }
    .locked-height {
        color: #BF0000;
        font-size: 18px;
        line-height: 18px;
        margin-left: 10px;
        font-weight: 500;       
    }
    .unlocked-height {
        color: #0051BB;
        font-size: 18px;
        line-height: 18px;
        margin-left: 10px;
        font-weight: 500;       
    }
    .note {
        color: #AAAAAA;
        margin-top: 10px;
        font-size: 13px;
    }
    .cell_text:before,.cell_text::after{
            content: none;
    }
    </style>
</head>
<body>
    <div id="main" >
        <div class="weui-panel up">
            <div class="weui-panel__hd hheader">
                <img class="order" src="../images/Order@2x.png" alt="">
                <span class="title">正在进行中的订单</span>
            </div>
            <div class="weui-panel__bd middle">
                <div class="weui-media-box weui-media-box_appmsg">
                    <div class="weui-media-box__hd">
                        <img class="logo_car" src="../images/car-business@2x.png" alt="">
                        <span class="type_card">储值卡</span>
                    
                    </div>
                    <div class="weui-media-box__bd">
                            <h4 id="car_num" class="weui-media-box__title">苏A.12345</h4>
                            <p class="weui-media-box__desc">进场时间&nbsp;&nbsp;2019/05/20 &nbsp;&nbsp;13:25:12</p>
                            <p class="weui-media-box__desc park_money">储值卡余额&nbsp;&nbsp;<span id="balance" >0</span>元</p>
                    </div>
                </div>
            </div>
            <div class="weui-panel__ft">
                <div class="kind_card">
                    <div id="lock-car" class="block">
                        <img class="lock-img" src="../images/Lock-unlock@2x.png" alt="">
                        <span class="lock">
                            <span class="lock-text">锁定</span> 
                            <span>/</span>
                            <span class="unlock-text">解锁</span> 
                        </span>
                    </div>
                    <div id="stored_card" class="block">
                        <img src="../images/Storage card recharge@2x.png" alt="">
                        <span>储值卡充值</span>
                    </div>
                    <div class="block" id="month_card">
                        <img  src="../images/Monthly renewal fee@2x.png" alt="">
                        <span>月卡续费</span>
                    </div>
                </div> 
            </div>
        </div>

        <div class="weui-panel lock-info cell_text" style="background:#F5F5F9">
                <div class="weui-panel-hd">
                    <img src="../images/locking@2x.png" alt="" style="width: 25px;vertical-align: middle;">
                    <span class="locked-height">车辆已锁定</span>
                </div>
                <div class="weui-panel-db" style="margin-top: 10px;">
                    <span class="note">提示：车辆已锁定，请解锁离场！</span>
                </div>
            </div>
            <div class="weui-panel unlock-info cell_text" style="background:#F5F5F9">
                <div class="weui-panel-hd">
                    <img src="../images/success@2x.png" alt="" style="width: 25px;vertical-align: middle;">
                    <span class="unlocked-height">车辆已解锁</span>
                </div>
                <div class="weui-panel-db" style="margin-top: 10px;">
                    <span class="note">提示：车辆已解锁，月卡车可直接离场！</span>
                </div>
            </div>

        <div class="weui-panel down cell_text">
             <!-- 轮播图 -->
             <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                    <div class="swiper-slide ad"><img class="ad" src="../images/ad-page@2x.png" alt=""></div>
                </div>
                <div class="swiper-pagination"></div>

            <!-- <img class="ad" src="../images/ad-page@2x.png" alt=""> -->
            <p class="tip">车辆锁定/解锁功能说明</p>
            <p class="desc">车辆锁定(解锁)功能，车主点击“锁定”按钮，通过平台下达限制离场指定，在车主没有点击“解锁”按钮时，出口道闸不予放行，反之放行</p>
        </div>
        
    </div>

    <script src="../js/jquery-1.11.3.min.js"></script>
    <script src="../js/weui.min.js"></script>
    <script src="../js/swiper.min.js"></script>
    <script>
     $(function(){
            var car = window.location.href;
            var cardata = car.split("="); //截取 url中的“=”,获得“=”后面的参数  
            var car_num = decodeURI(cardata[1]); //decodeURI解码  
            console.log(car_num);
            $('#car_num').html(car_num);
            var balance = $('#balance').html();
            console.log(balance);

            $('#stored_card').click(function(){
                window.location.href = 'moneycard_recharge.html?car_num='+car_num+'&balance='+balance;
            });

            $('#month_card').click(function(){
                window.location.href = '/month_card/monthly_card_renewal_fee.html?car_num='+car_num;
            });

            let lock_num = 0;
            let lock_flag = false;
            $('#lock-car').click(function(){
                //获取点击次数 
                lock_num += 1;
                if(lock_num %3 == 1) {
                    $('.lock-img').attr("src", "../images/Locked state@2x.png");
                    $('.lock-text').removeClass('locked-all').addClass('locked').siblings().addClass('locked-other');
                    $('.locked-other').removeClass('locked-all').addClass('locked-other');                    
                    $('.unlock-info').css('display','none');                    
                    $('.lock-info').css('display','flex');
                    console.log(lock_num);
                    // $()
                }else if(lock_num %3 == 2){
                    $('.lock-img').attr("src", "../images/Lock-unlock@2x.png");
                    $('.unlock-text').removeClass('locked-other').addClass('unlocked').siblings().addClass('locked-other');
                    $('.lock-info').css('display','none');                    
                    $('.unlock-info').css('display','flex');                    
                    console.log(lock_num);
                }else {
                    $('.unlock-text').removeClass('unlocked');
                    $('.lock-text').removeClass('locked-other').addClass('locked-all');
                    $('.locked-other').removeClass('locked-other').addClass('locked-all');
                    $('.lock-info').css('display','none');                    
                    $('.unlock-info').css('display','none'); 
                }
            });

            //轮播图

            var mySwiper = new Swiper('.swiper-container',
                {
                    speed:1000,//播放速度
                    autoHeight:true,
                    loop:true,//是否循环播放
                    setWrapperSize:true,
                    autoplay: 
                    {
                        delay: 2000,
                        disableOnInteraction: false,
                    },
                    pagination:  '.swiper-pagination',//分页
                    effect : 'slide',//动画效果
                }
            );
        })

        
    </script>
</body>
</html>